<template>
    <div>
        <!--  1.标题-->
        <h1>欢迎注册</h1>
        <!--  2.表单-->
        <div>
            <van-form>
                <van-cell-group inset>
                    <van-field
                        v-model="user.name"
                        label="用户名"
                        @change="checkName"
                        placeholder="请输入用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="user.phone"
                        label="手机号"
                        @change="checkPhone"
                        placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="code"
                        center
                        clearable
                        @change="checkCode"
                        label="验证码"
                        placeholder="请输入短信验证码"
                    >
                        <template #button>
                            <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="user.password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="password2"
                        type="password"
                        label="确认密码"
                        @change="checkPassword"
                        placeholder="请再次输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" :disabled="btnflag" native-type="button" @click="add">
                        注册新用户
                    </van-button>
                </div>
            </van-form>
        </div>
        <!--  3.左右 跳转-->
        <div>
            <router-link style="float: left" to="/login">登录账号</router-link>
            <router-link style="float:right;" to="/findpass">找回密码</router-link>
        </div>
    </div>
</template>

<script>
import { showToast } from 'vant';
export default {
    name: "Register",
    data(){
        return{
            btnflag:true,
            user:{},
            code:"",
            password2:""
        }
    },methods:{
        checkName(){
            //1.请求接口 校验用户名 是否可用
            this.axios.get("/api/user/checkname.do?name="+this.user.name).then((res)=>{
                //res.data  等于 R
                if(res.data.code==0){
                    showToast('用户名可用');
                }else {
                    showToast('用户名已被占用！');
                }
            })
        },
        checkPhone(){
            //2.请求接口 实现手机号校验
            this.axios.get("/api/user/checkphone.do?phone="+this.user.phone).then((res)=>{
                if(res.data.code==0){
                    showToast('手机号可用');
                }else {
                    showToast('手机号已被占用！');
                }
            })
        },
        sendCode(){
            //3.请求接口 注册验证码的发送
            this.axios.get("/api/sms/sendrcode.do?phone="+this.user.phone).then((res)=>{
                if(res.data.code==0){
                    showToast('验证码已发送到你手机，请查阅');

                }else {
                    showToast('手机号已被占用！');
                }
            })
        },
        checkCode(){
            //4.请求接口 实现短信验证码的校验
            this.axios.post("/api/sms/checkrcode.do",{phone:this.user.phone,code:this.code}).then(res=>{
                if(res.data.code==0){
                    this.btnflag=false;
                }else {
                    showToast("亲，验证码不对！");
                }
            })
        },
        checkPassword(){
            //校验2次密码是否一致
            if(this.user.password==this.password2){
                showToast("2次密码一致！");
            }else {
                showToast("亲，2次密码不一致");
            }
        },
        add(){
            //5.请求接口 实现注册 post 参数 json格式
            this.axios.post("/api/user/register.do",this.user).then((res)=>{
                if(res.data.code==0){
                    showToast('注册成功');
                    //实现页面跳转 Vue-Router
                    this.$router.push("/login");
                }else {
                    showToast(res.data.data);
                }
            })
        }
    }
}
</script>
<style scoped>

</style>
